import  { useEffect, useState } from 'react'
import axios from '../../api/http'
import { useNavigate, useParams } from 'react-router-dom'
import { Divider } from 'antd';
import { Avatar, List ,Button,Input} from 'antd';
function Index() {
    const [data,setData]=useState([])
    const {id}=useParams()
    const [list,setlist]=useState('')
    const nav=useNavigate()
    const getDate=async()=>{
        const res=await axios.get(`/article/${id}`)
        setData(res.data)
    }
    useEffect(()=>{
        getDate()
    },[])
    
const { TextArea  } = Input;
const token=localStorage.getItem('token')
const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    console.log('Change:', e.target.value);
  };
    const pl=()=>{
        if(!token){
            alert('请先登录')
            nav('/login')
        }else{
          axios.post(`/discuss`,{
            userId:47529555,// 47529555 用户id
            content:list,//评论内容
          //  commentId:number,//评论ID（非必填，回复评论时使用）
            articleId:id // 文章id 90
    
          }).then(res=>{
            console.log(res);
            setlist('')
            getDate()
            
          })
        }
    }
  return (
    <div style={{textAlign:'center'}} className='box'>
        <h2>{data.title}</h2>
        <p>发布时间{data.createdAt}</p>
        <Divider >评论{data.comments?.length||0}</Divider>
        <List
    itemLayout="horizontal"
    dataSource={data.comments}
    renderItem={(item, index) => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
          title={<div><span>{item.user.username}</span><span>{item.user.createdAt}</span></div>}
          description={
            <div>
                <div dangerouslySetInnerHTML={{ __html:(item.content)}}>

                </div>
            </div>
          }
          
        />
      </List.Item>
      
    )}
  />
  <div style={{display:'flex'}}>
        <TextArea  placeholder="请输入内容" value={list} onChange={(e)=>setlist(e.target.value)}></TextArea>
        <Button onClick={pl}>评论</Button>
      </div>
    </div>
  )
}

export default Index
